<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="assets/css/calculatorCar.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!--bootstrap的css-->
    <link rel="stylesheet" href="../homePage/bootstrapValidator/vendor/bootstrap/css/bootstrap.css"/>

    <link href="../homePage/css/fancybox/jquery.fancybox.css" rel="stylesheet"/>
    <link href="../homePage/css/flexslider.css" rel="stylesheet"/>
    <link href="../homePage/css/style.css" rel="stylesheet"/>
    <link href="layer/theme/default/layer.css" rel="stylesheet"/>
    <!--4.引入jquery框架-->
    <script type="text/javascript" src="js/jquery-1.9.1/jquery.js"></script>
    <script type="text/javascript" src="../homePage/bootstrapValidator/vendor/jquery/jquery-1.10.2.min.js"></script>
    <!--leyer的js-->
    <script src="layer/layer.js"></script>
    <!--5.引入boostrap框架的JS-->
    <script type="text/javascript" src="../homePage/bootstrapValidator/vendor/bootstrap/js/bootstrap.js"></script>
    <!--bootstrapValidator的js-->
<!--    <script type="text/javascript" src="../homePage/bootstrapValidator/dist/js/bootstrapValidator.js"></script>-->
    <script src="angularjs/angular.min.js"></script>

    <style>
        body {
            width: 100%;
            height: 100%;
        }

        .mybody {
            border: 1px #0ab568 solid;
            width: 700px;
            top: 50px;
            margin: auto;
            background-color: #FCF8E3;
        }

        .cost {
            margin-left: 150px;
        }

        .strong1 {
            margin-left: 100px;
            margin-top: 10px;
        }

        .strong {
            margin-top: 20px;
            margin-left: 60px;
            position: relative;
            width: 150px;
            text-align: center;
            height: 80px;
            border: 1px solid #0ab568;
            display: inline-block;
            line-height: 10px;
            color: #8c8c8c;
            text-decoration: none;
            cursor: pointer;
        }

        .strong2 {
            margin-left: 30px;
            position: relative;
            width: 600px;
            text-align: left;
            height: 50px;
            border: 0px solid #eeeeee;
            display: inline-block;
            line-height: 10px;
            color: #333333;
            text-decoration: none;
            cursor: pointer;
        }

        .strong3 {
            margin-left: 30px;
            position: relative;
            width: 600px;
            text-align: left;
            height: 50px;
            border: 0px solid #eeeeee;
            display: inline-block;
            line-height: 10px;
            color: #333333;
            text-decoration: none;
            cursor: pointer;
        }

        .container1 {

            width: 1050px;
            text-align: center;
            margin: auto;
        }

        .container2 {
            height: 30px;
            margin-left: 200px;
        }

        /*img {*/
        /*width: 130px;*/
        /*height: 50px;*/
        /*}*/
    </style>
    <script>
        $.fn.serializeObject = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        }
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope, $http) {
            var item1 = sessionStorage.getItem("user");

            $scope.username = JSON.parse(item1)
            $scope.myinit = function () {
                $scope.weather();
            }
            $scope.weather = function () {

                $http.get("http://localhost:6001/consumer/getWeather").success(function (data) {
                    if (item1 == null || item1 == "") {
                        $("#center").hide()
                    } else {
                        $("#login").hide()
                    }
                    var high = 0;
                    var low = 0;
                    var text_day = "";
                    $.each(data, function (key, values) {
                        if (key == "high") {
                            high = values;
                        }
                        if (key == "low") {
                            low = values;
                        }
                        if (key == "text_day") {
                            text_day = values;
                        }
                    });
                    if (text_day.indexOf("晴") != -1) {

                        $("#temp").html("<img src='img/晴.gif' alt='天气加载中……'>温度为" + low + "℃-" + high + "℃");
                    } else if (text_day.indexOf("阴") != -1 || text_day.indexOf("多云") != -1) {

                        $("#temp").html("<img src='img/阴.gif' alt='天气加载中……'>温度为" + low + "℃-" + high + "℃");
                    } else {

                        $("#temp").html("<img src='img/雨.gif' alt='天气加载中……'>温度为" + low + "℃-" + high + "℃");
                    }

                })
            }
            $scope.change1 = function () {
                var arr = [];
                for (var i in $scope.safetypeitemid) {
                    if ($scope.safetypeitemid[i]) {
                        arr.push($scope.safetypeitemid[i]);
                    }
                }
                $scope.ids = arr;
            };
            $scope.scratchLines = 2;
            $scope.compensateLines = 50;
            $scope.strong = 1;
            $scope.jisuan = function () {
                if ($scope.price == null || $scope.carYear == null) {
                    layer.msg("请填写买车的价格和车龄！")
                } else {
                    if ($scope.ids == null) {
                        layer.msg("请选择交强险！");
                    } else {
                        $http.get("http://localhost:8005/calculator/calculator?id=" + $scope.ids + "&compensateLines=" + $scope.compensateLines
                            + "&price=" + $scope.price + "&scratchLines=" + $scope.scratchLines + "&seating=" + $scope.strong
                            + "&year=" + $scope.carYear + "&userid=" + JSON.parse(sessionStorage.getItem("user")).userid
                        ).success(function (data) {
                            $scope.cost = data;
                            $("#cost").val(data);
                            $("#jisuan").hide();
                            $("#getshopping").show();
                            $("#chongxin").show();
                            $("#userid").val(JSON.parse(sessionStorage.getItem("user")).userid);

                            // if (data==null){
                            //     $("#jisuan").hide();
                            //
                            // } else {
                            //     $("#getshopping").hide();
                            //     $("#jisuan").show();
                            // }
                        });
                    }
                }
            }
            $scope.chongxin = function () {
                $scope.jisuan();
            };
            $scope.quiet = function () {
                sessionStorage.clear()
                window.location.href = "../homePage/index.html";
            }

        });
        $(function () {
            $("#chongxin").hide();
            $("#setshopping").click(function () {
                var username = $("#username").val()
                var usertel = $("#usertel").val();
                var insuredpersionidnumber = $("#insuredpersionidnumber").val();
                var carmasteridnumber = $("#carmasteridnumber").val();
                var carmastername = $("#carmastername").val();
                //身份证正则表达式
                var idreg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                //手机号正则表达式
                var phonereg = /^1[0-9]{9}$/;
                if (username == "" || usertel == "" || insuredpersionidnumber == "" || carmasteridnumber == "" || carmastername == "") {
                  //  alert("请填写完整信息")
                    layer.msg("请填写完整信息")
                } else if (idreg.test(insuredpersionidnumber) == false) {
                  //  alert("请正确填写被保人身份证号")
                    layer.msg("请正确填写被保人身份证号")
                } else if (idreg.test(carmasteridnumber) == false) {
                   // alert("请正确填写车主身份证号")
                    layer.msg("请正确填写车主身份证号")
                }else if(phonereg.test(usertel)) {
                  //  alert("请正确填写手机号")
                    layer.msg("请正确填写手机号")
                } else {
                    var shopping = $('#shopping').serializeObject();
                    console.log(shopping);
                    console.log($('#shopping'));
                    $.ajax({
                        url: 'http://127.0.0.1:8006/order/addOrder',
                        type: 'post',
                        contentType: 'application/json;charset=UTF-8',
                        data: JSON.stringify(shopping),
                        dataType: 'json',
                        success: function (res) {
                            if (res.code == 200) {
                                console.log(res.data);
                                //location.href = "../myCenter/calculatorCar.html";
                                $("#myModal").modal("hide");
                                window.location.href = "../myCenter/myOrder.html";
                            } else {
                                //layer.msg(res.data);
                                alert(res.msg);
                            }
                        },
                    });
                }
            });
        });

    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" ng-init="myinit()">
<div id="wrapper">
    <!-- start header -->
    <header>
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html"><img src="../homePage/img/logo.png" alt="logo"
                                                                   width="100px" height="50px"/></a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="pricing.html">车险</a></li>
                        <li><a href="about.html">关于我们</a></li>
                        <!-- <li><a href="contact.html">联系我们</a></li>-->
                        <li id="center"><a href="../myCenter/home.html">个人中心</a></li>
                        <li id="login"><a href="../vendor/loginByName.html">登录|注册</a></li>
                        <li id="temp"></li>
                    </ul>
                </div>
            </div>
        </div>
    </header><!-- end header -->
    <section id="inner-headline">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="pageTitle">精准报价</h2>
                </div>
            </div>
        </div>
    </section>
    <section id="content">
        <div class="container">
            <!-- end divider -->
            <div class="row">
                <div class="col-md-12">
                    <div>
                    </div>
                </div>
            </div>
            <div class="row">
                <!--显示所有险种-->
                <div class="mybody">
                    <div class="jihua" style="color: #34ce57">
                        <h2 class="text-center">车险计算器</h2>
                    </div>
                    <div class="strong1">
                        <div style="margin-left: 80px">
                            车价:&nbsp;&nbsp;&nbsp;&nbsp;<input placeholder="¥/元"
                                                              ng-model="price" value=""
                                                              style="width: 180px"/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;元</br></br>
                            车龄:&nbsp;&nbsp;&nbsp;
                            <select ng-model="carYear" style="width: 180px">
                                <option ng-value="1">一年以内</option>
                                <option ng-value="2">一年以上</option>
                            </select>
                        </div>
                        <div style="position: relative;left: 200px"><h4>交强险</h4></div>
                        <div style="position: relative;left: 80px;top: -10px">
                            <input type="checkbox" name="safetypeitemid" ng-change='change1();'
                                   ng-true-value="1" ng-false-value="" ng-model='safetypeitemid.a'/>
                            <span
                                    style="color: red">* 交强险是必选的哦 </span></div>


                        <div class="strong" style="position: relative;left: 20px;top: -20px;">
                            <input style="float: left" type="radio" name="strong" ng-value="1" ng-model="strong"/>
                            <h4>交强险&nbsp;&nbsp;<span style="font-size: 14px;color: #2aabd2">950</span>元</h4>
                            <h6>6座以下</h6>
                        </div>
                        <div class="strong" style="position: relative;left: 20px;top: -20px;">
                            <input style="float: left" type="radio" name="strong" ng-value="2" ng-model="strong"/>
                            <h4>交强险&nbsp;&nbsp;<span style="font-size: 14px;color: #2aabd2">1100</span>元</h4>
                            <h6>6座以上</h6>
                        </div>
                    </div>
                    </br>
                    <div style="position: relative;left: 300px;top: -30px;"><h4>商业险</h4></div>
                    <div class="strong1" style="position: relative;left: 50px;top: -30px">
                        <div class="strong3">
                            <input type="checkbox" name="safetypeitemid" ng-change='change1();' ng-true-value="3"
                                   ng-false-value=""
                                   ng-model='safetypeitemid.b'/>车辆损失险</br>
                        </div>
                        <div class="strong2">
                            <input type="checkbox" name="safetypeitemid" ng-change='change1();' ng-true-value="4"
                                   ng-false-value=""
                                   ng-model='safetypeitemid.c'/>第三者责任保险</br>
                            <span>赔付额度
										<input type="radio" name="compensateLines" ng-value="5"
                                               ng-model="compensateLines"/>5万
										<input type="radio" name="compensateLines" ng-value="10"
                                               ng-model="compensateLines"/>10万
										<input type="radio" name="compensateLines" ng-value="20"
                                               ng-model="compensateLines"/>20万
										<input type="radio" name="compensateLines" ng-value="50"
                                               ng-model="compensateLines"/>50万
										<input type="radio" name="compensateLines" ng-value="100"
                                               ng-model="compensateLines"/>100万
									</span>
                        </div>
                        <div class="strong2">
                            <input type="checkbox" name="safetypeitemid" ng-change='change1();' ng-true-value="5"
                                   ng-false-value=""
                                   ng-model="safetypeitemid.d"/>车上人员责任险
                        </div>
                        <div class="strong2">
                            <input type="checkbox" name="safetypeitemid" ng-change='change1();' ng-true-value="6"
                                   ng-false-value=""
                                   ng-model="safetypeitemid.e"/>车身刮痕损失险</br>
                            <span>赔付额度
										<input type="radio" name="scratchLines" ng-value="2" ng-model="scratchLines"/>2千
										<input type="radio" name="scratchLines" ng-value="5" ng-model="scratchLines"/>5千
										<input type="radio" name="scratchLines" ng-value="10" ng-model="scratchLines"/>1万
										<input type="radio" name="scratchLines" ng-value="20" ng-model="scratchLines"/>2万
							</span>
                        </div>
                    </div>
                    <div class="cost">投保费计算结果(&nbsp;<span style="color: red">{{cost}}</span>&nbsp;)元</div>
                    </br>
                    <div align="center">
                        <button id="jisuan" class="btn btn-success" type="button" ng-click="jisuan()">计算报价</button>
                        <!--<a id="getshopping" href="realTest.html" class="btn btn-success">前往购买</a>-->
                        <button id="getshopping" data-target="#myModal"
                                data-toggle="modal" class="btn btn-medium"> 前往购买
                        </button>
                        <button id="chongxin" class="btn btn-success" type="button" ng-click="jisuan()">重新报价</button>
                    </div>
                    </br>

                    <!-- 模态框（Modal） -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <form id="shopping">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">立即购买</h4>
                                    </div>
                                    <!--<div class="input-group">-->
                                    <!--<span class="input-group-addon">您选择的车险为： </span>-->
                                    <!--<input readonly="readonly" class="form-control" id="safetypeid"-->
                                    <!--name="safetypeid">-->
                                    <!--</div>-->
                                    <div class="input-group">
                                        <span class="input-group-addon">您的车险价格为： </span>
                                        <input type="hidden" name="userid" id="userid">
                                        <input readonly="readonly" class="form-control" id="cost" name="detailed">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">您的手机号</span>
                                        <input type="text" id="usertel" name="usertel" class="form-control"
                                               placeholder="请输入您的手机号"
                                               aria-describedby="basic-addon1">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">被保人身份证号</span>
                                        <input type="text" id="insuredpersionidnumber" name="insuredpersonidnumber"
                                               class="form-control"
                                               placeholder="请输入被保人身份证号"
                                               aria-describedby="basic-addon1">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">被保人姓名</span>
                                        <input type="text" id="username" name="insuredpersonname" class="form-control"
                                               placeholder="请输入被保人姓名"
                                               aria-describedby="basic-addon1">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">车主身份证号</span>
                                        <input type="text" id="carmasteridnumber" name="carmasteridnumber"
                                               class="form-control"
                                               placeholder="请输入车主身份证号"
                                               aria-describedby="basic-addon1">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">车主姓名</span>
                                        <input type="text" id="carmastername" name="carmastername" class="form-control"
                                               placeholder="请输入车主姓名"
                                               aria-describedby="basic-addon1">
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        <a id="setshopping" class="btn btn-primary">提交订单</a>
                                    </div>
                                </div><!-- /.modal-content -->
                            </form>
                        </div><!-- /.modal -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="widget">
                        <h5 class="widgetheading">Our Contact</h5>
                        <address>
                            <strong>Financial Services company Inc</strong><br>
                            JC Main Road, Near Silnile tower<br>
                            Pin-21542 NewYork US.
                        </address>
                        <p>
                            <i class="icon-phone"></i> (123) 456-789 - 1255-12584 <br>
                            <i class="icon-envelope-alt"></i> email@domainname.com
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="widget">
                        <h5 class="widgetheading">Quick Links</h5>
                        <ul class="link-list">
                            <li><a href="#">Latest Events</a></li>
                            <li><a href="#">Terms and conditions</a></li>
                            <li><a href="#">Privacy policy</a></li>
                            <li><a href="#">Career</a></li>
                            <li><a href="#">Contact us</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="widget">
                        <h5 class="widgetheading">Latest posts</h5>
                        <ul class="link-list">
                            <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
                            <li><a href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></li>
                            <li><a href="#">Natus error sit voluptatem accusantium doloremque</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="widget">
                        <h5 class="widgetheading">Recent News</h5>
                        <ul class="link-list">
                            <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
                            <li><a href="#">Pellentesque et pulvinar enim. Quisque at tempor ligula</a></li>
                            <li><a href="#">Natus error sit voluptatem accusantium doloremque</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="sub-footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="copyright">
                            <p>
                                Copyright &copy; 2017.Company name All rights reserved.<a target="_blank"
                                                                                          href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <ul class="social-network">
                            <li><a href="#" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a>
                            </li>
                            <li><a href="#" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#" data-placement="top" title="Linkedin"><i class="fa fa-linkedin"></i></a>
                            </li>
                            <li><a href="#" data-placement="top" title="Pinterest"><i class="fa fa-pinterest"></i></a>
                            </li>
                            <li><a href="#" data-placement="top" title="Google plus"><i
                                    class="fa fa-google-plus"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>

</body>


<script type="text/javascript">
    window.onload = function () {
        $("#getshopping").hide();

        function qm_appendStr(obj, html) {
            var oDiv = document.createElement('div');
            oDiv.innerHTML = html;
            while (oDiv.childNodes.length) {
                obj.appendChild(oDiv.childNodes[0]);
            }
        }

    }
</script>
</html>